<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>美宜佳玩具售卖系统管理端</title>
    <link rel="shortcut icon" href="../../favicon.ico">
    <!-- 引入样式 -->
    <link rel="stylesheet" href="../../plugins/element-ui/index.css"/>
    <link rel="stylesheet" href="../../styles/common.css">
    <link rel="stylesheet" href="../../styles/login.css">
    <link rel="stylesheet" href="../../styles/icon/iconfont.css"/>
    <style>
        .body {
            min-width: 1366px;
        }
    </style>
</head>

<body>
<div class="login" id="login-app">
    <!--    正中心的长方形-->
    <div class="login-box">
        <!--      登录表单的左侧图片-->
        <img src="../../images/login/LOGIN-L.jpg" alt="">
        <!--      登录表单-->
        <div class="login-form">
            <el-form ref="loginForm" :model="loginForm" :rules="loginRules">
                <!--   登录表单上方的logo-->
                <div class="login-form-title">
                    <img src="../../images/login/login-logo.png" style="width:400px;height:200px;" alt=""/>
                </div>
                <!--  用户名表单组件-->
                <el-form-item prop="username">
                    <el-input v-model="loginForm.username"
                              type="text"
                              placeholder="请输入您的账号"
                              maxlength="20"
                              prefix-icon="iconfont icon-user"
                              auto-complete="off"/>
                </el-form-item>
                <!--  密码表单组件-->
                <el-form-item prop="password">
                    <el-input v-model="loginForm.password"
                              type="password"
                              placeholder="请输入您的密码"
                              maxlength="20"
                              prefix-icon="iconfont icon-lock"
                              @keyup.enter.native="handleLogin"/>
                </el-form-item>
                <!--  身份选择-->
                <template>
                    <el-radio-group v-model="isAdmin" class="login-btn-choose-identity">
                        <el-radio-button :label="true">管理员</el-radio-button>
                        <el-radio-button :label="false">员工</el-radio-button>
                    </el-radio-group>
                </template>
                <!--  登录按钮-->
                <el-form-item style=" width:100%;
                    ">
                    <el-button :loading="loading" class="login-btn" size="medium" type="primary" style="width:100%;"
                               @click.native.prevent="handleLogin">
                        <span v-if="!loading">登录</span>
                        <span v-else>登录中...</span>
                    </el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</div>

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="../../plugins/vue/vue.js"></script>
<!-- 引入组件库 -->
<script src="../../plugins/element-ui/index.js"></script>
<!-- 引入axios -->
<script src="../../plugins/axios/axios.min.js"></script>
<script src="../../js/request.js"></script>
<script src="../../js/validate.js"></script>
<script src="../../api/login.js"></script>

<script>
    new Vue({
        el: '#login-app',
        data() {
            return {
                //登录的表单数据对象
                loginForm: {
                    username: 'admin',
                    password: 'admin'
                },
                loading: false, //表示登录按钮是否在加载的状态中
                isAdmin: undefined //表示登录的类型,该必须被选择
            }
        },
        computed: {
            //登录的表单校验 loginRules是一个对象 这个对象下面有两个数组
            loginRules() {
                //用户名的校验器
                const validateUsername = (rule, value, callback) => {
                    if (value.length == 0) {
                        callback(new Error('请输入用户名'))
                    } else if (value.length < 5 || value.length > 12) {
                        callback(new Error('用户名的长度应该在5~12位之间'))
                    } else {
                        callback()
                    }
                }
                //密码的校验器
                const validatePassword = (rule, value, callback) => {
                    if (value.length < 5) {
                        callback(new Error('密码至少应该在5位以上'))
                    } else {
                        callback()
                    }
                }
                //将字段与校验器返回
                return {
                    'username': [{'validator': validateUsername, 'trigger': 'blur'}],
                    'password': [{'validator': validatePassword, 'trigger': 'blur'}]
                }
            }
        },
        methods: {
            async handleLogin() {
                //判断是否选择了身份按钮
                if (!this.isAdmin === undefined) {
                    this.$notify.error({
                        title: '错误',
                        message: '我们需要确定身份以此来进行接下来的登录操作'
                    });
                }
                //调用校验规则的方法校验表单 $refs.loginForm在调单中的refs的属性中定义了,在这里是引用
                this.$refs.loginForm.validate(async (valid) => {
                    if (valid) {
                        this.loading = true //使得登陆中的动画显现
                        //根据不同身份发送登录异步请求
                        let res;
                        if (Boolean(this.isAdmin) === true) {
                            //调用admin的请求
                            res = await loginApiOfAdmin(this.loginForm)
                        } else {
                            //调用employee的请求
                            res = await loginApiOfEmployee(this.loginForm)
                        }
                        //判断是否登陆成功
                        if (String(res.code) === '1') {
                            if (Boolean(this.isAdmin) === true) {
                                //若是管理员则再存储一个管理员的标记
                                localStorage.setItem("admin", this.isAdmin);
                            }
                            //将后端登录成功的用户信息记录到本地 localStorage与cookie类似 比cookie存储容量大
                            localStorage.setItem('userInfo', JSON.stringify(res.data))
                            //跳转页面
                            window.location.href = '../../index.html'
                        } else {
                            this.$message.error(res.msg)
                            this.loading = false
                        }
                    }
                })
            }
        }
    })
</script>
</body>

</html>
